<header>
  <div class="head-left" (click)="goBack_onclick();">
    <i class="fa fa-chevron-left"></i>
  </div>
  <div class="head-content">
    <span>借书架</span>
  </div>
  <div class="head-right"></div>
</header>

<div class="content-bookcase" *ngIf="readerId && bookcase.length != 0">


  <div class="box" *ngFor="let item of bookcase;">

    <div class="book-item" [@aroAnimation]="'flyIn'">
      <img src="{{item.Book.Image}}" alt="">
      <div class="desc">
        <div class="book-name">{{item.Book.Name}}</div>
        <div class="book-author">{{item.Book.Author.Name}}</div>
        <div class="book-publisher">{{item.Book.Publisher.Name}}</div>
      </div>
      <div class="operator">
        <button mat-mini-fab color="primary" [matMenuTriggerFor]="menu">
          <i class="fa fa-align-justify"></i>
        </button>
        <mat-menu #menu="matMenu">
          <button mat-menu-item (click)="removeBook_onclick(item);">移出</button>
          <button mat-menu-item>取消</button>
        </mat-menu>
      </div>
    </div>

  </div>


</div>


<div class="content-bookcase" *ngIf="!readerId" [@aroAnimation]="'fadeIn'">
  <div class="tips-img">
    <img src="../../../../assets/img/empty.png" alt="">
  </div>
  <div class="tips-word" (click)="goLogin_onclick();">
    <button mat-button>-点此登录可查看书架内容-</button>
  </div>
</div>

<div class="content-bookcase" *ngIf="readerId && bookcase.length == 0" [@aroAnimation]="'fadeIn'">
  <div class="tips-img">
    <img src="../../../../assets/img/empty3.png" alt="">
  </div>
  <div class="tips-word" (click)="goCategory();">
    <button mat-button>-找点书加入书架吧!-</button>
  </div>
</div>


<footer>
  <div class="footer-menu" (click)="clearBookcase_onclick();">
    <button class="clear-bookcase" mat-button [disabled]="bookcase.length == 0">
      <i class="fa fa-trash-o"></i>
      <span>清空借书架</span>
    </button>
  </div>
  <div class="footer-menu" (click)="submitOrders_onclick();">
    <button class="submit-orders" mat-button color="primary" [disabled]="bookcase.length == 0">
      <span>提交订单</span>
    </button>
  </div>
</footer>
